:root {
    --azul-oscuro: #2c5282; 
    --gris-oscuro: #2d3748;
    --linea: #cbd5e0;
} 
.btn-accion {background: #2c7be5 !important; color: white !important; text-decoration: none !important; padding: 10px 20px !important; border-radius: 4px; display: inline-block;font-weight: bold; transition: background 0.3s ease;}
.timeline-container { display: flex; justify-content: space-between; align-items: flex-start; position: relative;  max-width: 1200px;  margin: 0 auto; padding-top: 20px; margin-bottom: 20px; }
.timeline-container::before { content: ''; position: absolute; top: 135px; left: 0; right: 0; height: 2px; background-color: var(--linea); z-index: 1; }
.timeline-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2; min-width: 150px; position: relative; }
.icon-box { width: 90px; height: 90px; background-color: var(--azul-oscuro); border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.material-symbols-outlined { color: white; font-size: 75px !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.dot { width: 12px; height: 12px; background-color: black; border-radius: 50%; margin-bottom: 15px; }
.description { background-color: var(--gris-oscuro); color: white; padding: 5px 20px; border-radius: 20px; font-weight: bold; font-size: 0.95rem; margin-bottom: 10px; cursor: pointer; }
.timeline-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease; }
.timeline-link:hover { transform: scale(1.05); }
.timeline-link:hover .icon-box { background-color: #3182ce; }
.info-desplegable { display: none; position: absolute; top: 210px; width: 250px; background: white; padding: 15px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); border: 1px solid #e2e8f0; z-index: 100; animation: fadeIn 0.3s ease; }
.lista-limpia { list-style: none; padding: 0; margin: 10px 0; font-size: 1.0rem; text-align: left; }
.lista-limpia li { padding: 5px 0; border-bottom: 1px solid #f1f5f9; }
.lista-limpia li:last-child { border: none; }
.info-desplegable h3 { margin-top: 0; color: var(--azul-oscuro); }

@media (max-width: 768px) {
    .timeline-container { flex-direction: column; align-items: center; }
    .timeline-container::before { display: none; }
    .timeline-item { margin-bottom: 60px; }
    .info-desplegable { position: relative; top: 0; margin-top: 10px; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}